Home » Beitrag verschlagwortet mit 'Angular'
Schlagwort-Archive: Angular
Deploy Angular
Run ng build.
This generates a folder ‚dist‚ containing another folder named like the angular project name, containing a ‚browser‚ directory. E.G. dist/my-project/browser
The browser folders content can be put into a directory that is actually served by a HTTP server.
Meaning: E.G. if an index.html is served by a HTTP server this one can be replaced by the ‚browser‘ directory content within your ‚dist‘ folder.
When I did that, still there was a problem that the index.html of our Angular build was just displayed as a blank page. When facing this, then open the developers console of the browser and observe the errors. Probably it says something about (HTTP 404) resources not found. This can be mitigated by adapting the base ref directive in the index.html file: E.G. I have changed it to <base href=“.“>
Reading
Angular Bootstrapping
When a user invokes a Angular App over the Internet: How is the Angular App served?
This is described beautifully in: Bootstrapping in Angular: How It Works Internally
Mentioning some key facts:
Artifact | What it does |
---|---|
angular.json | Describes the project(s) and for each of them the index.html and main.js that is set up at the root. |
index.html | Contains: 1.) the html selector tag which is referenced in the root Angular component that implements it. –> e.g. ‚<app-root></app-root> 2.) The references to the JavaScript files invoked |
main.js | Calls some Angular libraries in order to invoke the root module. This is a Module annotated with @NgModule –> e.g. AppModule |
app.module.js (=AppModule) | Annotated with @NgModule, meaning: It is an Angular Module definition. Contains the bootstrap: [AppComponent] directive telling Angular to load the AppComponent |
app.component.js (AppComponent) | Having the this annotation (or similar): @Component({ selector: ‚app-root‘, templateUrl: ‚./app.component.html‘, styleUrls: [‚./app.component.css‘] }) Telling angular, that it implements the HTML node ‚<app-root>‘ with the given template ‚./app.component.html‘ |