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

[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) ...
コメントを投稿
続きを読む

[Nest.js] Show static files

Intro I wanted to use Nest.js and WebRTC(node-webrtc). NestJS - A progressive Node.js framework Documentation | NestJS - A progressive Node.js framework And because I wanted to try with simple page(not use JavaScript frameworks), I added static HTML, CSS, JavaScript into a Nest.js project. Prepare Install First, I installed @nestjs/cli. First steps | NestJS - A progressive Node.js framework As same as last time , I couldn't do global install because I had used Volta. But I could installed by volta. volta install @nestjs/cli Create project nest new nest-web-rtc-sample volta pin node@12 Run npm start After doing "npm start", I could getting "Hello World!" from http://localhost:3000. Add static files I could add static files by two ways. @nestjs/serve-static First one of them was using "serve-static". Serve Static | NestJS - A progressive Node.js framework npm install --save @nestjs/serve-static And I needed adding a module into app.modu...
コメントを投稿
続きを読む

[Angular] Sending file with Observable and showing loading screen

Intro When I tried sending file data on last time, I had confused with "promise.then", "async/await" and "Observable". [Angular][ASP.NET Core] Upload chunked files So I wanted to distinct them, and this time, I tried to use "Observable" because HttpClient return Observable<any>. Call observables in order I sended file in these steps. Read file by FileReader Create directory for saving chunks send and saving chunks merge chunks to one file and delete chunks Each steps used the former steps result. So I could write by Promise.then like below. this.executeStep1() // return Promise<UploadResult> .then(result => this.executeStep2(result)) // return Promise<UploadResult> .then(result => this.executeStep3(result)) // return Promise<UploadResult> .catch(reason => console.log(reason)); Result I could write with pipe & flatMap. file-uploader.service.ts public upload(file: File): Observable<U...
コメントを投稿
続きを読む