スキップしてメイン コンテンツに移動

[Angular] Upgrade from 8 to 9 and set basehref

Upgrade from 8 to 9

I have had a question.
Though I often executed "npm -g update" and Angular ver.9 has already been released, but Angular version in my PC is still 8.

Why?

Finally I got the reason.
I must install @angular/cli again.
npm install -g @angular/cli
It's same as updating NuGet packages.

After installing, I just do "ng update @angular/cli @angular/core" on my project.

Angular Update Guide

set basehref

Because I use IIS, base url becomes like "http://localhost:5000/sample".
So when I build Angular product, I must add path to index.html like below.

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <base href="">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="sample/favicon.ico">
</head>
<body>
  <app-root></app-root>
    <script src="sample/runtime-es2015.js" type="module"></script>
    <script src="sample/runtime-es5.js" nomodule defer></script>
    <script src="sample/polyfills-es5.js" nomodule defer></script>
    <script src="sample/polyfills-es2015.js" type="module"></script>
    <script src="sample/styles-es2015.js" type="module"></script>
    <script src="sample/styles-es5.js" nomodule defer></script>
    <script src="sample/vendor-es2015.js" type="module"></script>
    <script src="sample/vendor-es5.js" nomodule defer></script>
    <script src="sample/main-es2015.js" type="module"></script>
    <script src="sample/main-es5.js" nomodule defer></script>
</body>
</html>
Because I'm tired to do again and again.
Finally I know I don't need do that.

I should set "base href" in the index.html.

index.html


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sample</title>
  <base href="/sample/">  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
    <script src="runtime-es2015.js" type="module"></script>
    <script src="runtime-es5.js" nomodule defer></script>
    <script src="polyfills-es5.js" nomodule defer></script>
    <script src="polyfills-es2015.js" type="module"></script>
    <script src="styles-es2015.js" type="module"></script>
    <script src="styles-es5.js" nomodule defer></script>
    <script src="vendor-es2015.js" type="module"></script>
    <script src="vendor-es5.js" nomodule defer></script>
    <script src="main-es2015.js" type="module"></script>
    <script src="main-es5.js" nomodule defer></script>
</body>
</html>
And I can set it automatically by "ng build --base-href /sample/".
I also can add to package.json

package.json


{
  "name": "ngrx-sample",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /sample/",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

Angular 2 / 4 / 5 - Set base href dynamically - Stack Overflow
Angular - ng build

Integrated in ASP.NET Core app

How about an Angular project what is integrated in ASP.NET Core app?

[ASP.NET Core][Angular] Integrate Angular app into ASP.NET Core app - msl note

Build command written in csproj.

UpgradeSample.csproj


...
    <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
        <!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build -- --prod --base-href /sample/" />
        <Exec WorkingDirectory="$(SpaRoot)" Command="npm run build:ssr -- --prod" Condition=" '$(BuildServerSideRenderer)' == 'true' " />

        <!-- Include the newly-built files in the publish output -->
        <ItemGroup>
            <DistFiles Include="$(SpaRoot)dist\**; $(SpaRoot)dist-server\**" />
            <DistFiles Include="$(SpaRoot)node_modules\**" Condition="'$(BuildServerSideRenderer)' == 'true'" />
            <ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
                <RelativePath>%(DistFiles.Identity)</RelativePath>
                <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
                <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
            </ResolvedFileToPublish>
        </ItemGroup>
    </Target>
</Project>
ラベル:

コメント

コメントを投稿

このブログの人気の投稿

[Angular][ASP.NET Core] Upload chunked files

Intro I wanted to send files to Web application (made by ASP.NET Core). If the file size had been small, I didn't need do any special things. But when I tried to send a large file, the error was occurred by ASP.NET Core's limitation. Though I could change the settings, but I didn't want to do that, because I hadn't known the file sizes what would been actually using. So I splitted the data into chunks first, and sent them. After receiving all chunks, I merged them into one file. There might be some libraries or APIs (ex. Stream API) what did them automatically, but I couldn't find them. What I did [ASP.NET Core] Make CORS enabled [Angular] Split a large file into chunks [Angular][ASP.NET Core] Send and receive data as form data [ASP.NET Core] Merge chunks into one file [ASP.NET Core] Make CORS enabled Because the client side application(Angular) and the server side application(ASP.NET Core) had been separated, I had to make CORS(Cross-Origin Requests) ...
コメントを投稿
続きを読む

[PostgreSQL] Play with TypeORM 1

Intro This time, I tried accessing Database by TypeORM. Because I wanted to manage Database tables by ORM, I created a table first.  GitHub - typeorm/typeorm   TypeORM - Amazing ORM for TypeScript and JavaScript (ES7, ES6, ES5). Installation and creating a project Installation TypeORM needed "reflect-metadata" and database driver. npm install --save typeorm reflect-metadata pg typescript tsc npm install --save-dev @types/node And I also installed "ts-node" to skip compiling. npm install --save ts-node Preparing References I could generate a TypeORM project by TypeORM command. npx typeorm init --name gen-typeorm-sample --database postgres I refered Most of all settings from it. Adding files and folders First, I added tsconfig.json. npx tsc --init And I edited like below. tsconfig.json { "compilerOptions": { /* Basic Options */ "incremental": true, "target": "es5", "module": "comm...
コメントを投稿
続きを読む

[Ubuntu] Install Docker, PostgreSQL(From DockerHub), PgAdmin4 + SELECT ALL

Intro I build development of PostgreSQL environment on Ubuntu this time. Because I haven't wanted to install PostgreSQL directly, I use Docker to install it. After installing them, I will try some SQL. Build development environments Docker According to the documents, I add repository and install "docker-ce", "docker-ce-cli", "containerd.io" Get Docker Engine - Community for Ubuntu | Docker Documentation When I had installed "Docker for Windows" on Windows, it had the GUI application. But maybe there is no GUI application for Ubuntu or I need installing another package? PostgreSQL(Docker Hub) Because I have wanted to use latest version, I just do "docker pull postgres". postgres - Docker Hub After getting PostgreSQL, I made mistake when I did "docker run". docker run (failed) docker run --name sample-shop -e POSTGRES_PASSWORD=postgres -d postgres -p 5432:5432 There are no any errors, but I can't access to...
コメントを投稿
続きを読む