How is the Angular platform loaded into the application using the Angular CLI?

Question

I am converting an existing AngularJS application into a hybrid application so that I can gradually upgrade it to Angular 4. I want to understand how to reference Angular 4 in existing AngularJS. In an existing AngularJS application, he explains how the AngularJS framework loads - it's just a script file:

<script src="/angular/angular.js"></script> 

To familiarize myself with the updated version of Angular, I created a separate Angular 5 “quickstart” application using the Angular quick installation guide at https://angular.io/guide/quickstart , and I can run it using:

 ng serve --open 

When I look at project files, I don’t see where the Angular framework really loads. It does not have a script anywhere in the src / index.html file for this application, it simply declares a directive for the component (app.component.ts), which looks like this:

 import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { title = 'Test Angular 5 app'; } 

Where is import imported from? The Angular documentation says about the index.html file that it is:

The main HTML page that is displayed when someone visits your site. The most time when you will never need to edit it. The CLI automatically adds all the js and css files when creating the application, so you do not need to add any or tags here manually.

So what is going on here? How does @ angular / core actually refer?

Answer 1

When using the Angular CLI, we have many moving parts. To really understand what is happening, we need to consider some of the main technologies used in the Angular CLI, as they relate to the output files and the module resolution:

• TypeScript - Converts your TypeScript code to ES5 or ES6 (most often ES5). Transformed code will use CommonJS modules by default if the target is ES5. If the target is ES6, then ES6 modules will be used.
• Webpack - take your passed TypeScript code and plot your import / export dependency based on the entry points defined in webpack.config.js . This dependency graph will include all of your modules, and it will pack these modules in 1+ packages , depending on the configuration. This is the step where the @angular/core dependency (which is located in node_modules/@angular/core ) is processed by Webpack and added to the package, which can be accessed at runtime.

You can upload the generated packages to the page by including the generated files in your HTML. In the case of JS files, you upload them using a script tag, as you did with AngularJS.

Since we use the Angular CLI, by default there are many configurations in Webpack, so we will have several packages generated.

I just created an empty Angular CLI project and checked the HTML to see the 5 generated packages:

At the heart of the difficulty when comparing Angular project files with AngularJS files is that Angular code is converted using several build steps, and AngularJS code is usually used out of the box with ES5. If you want to add Webpack and TypeScript to your AngularJS assembly, you will see something very similar to Angular output.

---

Where is Webpack located in the Angular CLI?

Under the hood, the Angular CLI uses Webpack to create your project and merge your files.

The Angular team decided not to expose the Webpack configuration file for the Angular CLI, but they added a ng eject that generates webpack.config.js that matches the Webpack assembly of your project. The drawback of extracting is that you will no longer use ng serve to serve your project. Instead, you will use npm run build && npm run start (you'll see that these scripts are added to your package.json after extraction), which will create and maintain your project based on the generated webpack.config.js file.

This feature is very important if you need to make changes to the default Webpack assembly by default.

Read more about ng eject here .

Where are the generated packages?

If you use ng serve , you will not see any of your generated files, since they are served from memory and not from disk (to speed up when files are constantly changing), so your generated files are not located in any folder.

If you want to view the created files, you can run ng build , which will create a dist folder with index.html and its associated assets / packages.

Please note that by default, all the commands that build or maintain your project will delete your dist folder unless you pass --no-delete-output-path when creating / maintaining.

Answer 2

You need to understand how import and export work in TypeScript.

From TypeScript Documents

Export Ads

Any declaration (for example, a variable, function, class, type alias, or interface) can be exported by adding the export keyword.

Validation.ts

 export interface StringValidator { isAcceptable(s: string): boolean; } 

ZipCodeValidator.ts

 export const numberRegexp = /^[0-9]+$/; export class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } 

Export Instructions

Export instructions are convenient when exporting needs to be renamed to consumers, so the above example can be written as:

ZipCodeValidator.ts

 class ZipCodeValidator implements StringValidator { isAcceptable(s: string) { return s.length === 5 && numberRegexp.test(s); } } export { ZipCodeValidator }; export { ZipCodeValidator as mainValidator }; 

Import

Importing is almost as simple as exporting from a module. Import the exported declaration using one of the import forms below:

Import a single export from a module

 import { ZipCodeValidator } from "./ZipCodeValidator"; let myValidator = new ZipCodeValidator(); 

import can also be renamed

 import { ZipCodeValidator as ZCV } from "./ZipCodeValidator"; let myValidator = new ZCV(); 

Import the whole module into one variable and use it to access the export of the module

 import * as validator from "./ZipCodeValidator"; let myValidator = new validator.ZipCodeValidator(); 

Since you followed the Angular Quick Start Guide, you should have used npm , which is used to install your modules and dependencies.

If you read angular.io/npm

@ angular / core: critical parts of the runtime needed for each expression. Includes all metadata decoders, component, directive, dependency injection and component lifecycle hooks.

And by default, npm saves all your dependencies in the node_modules directory.

So, you import the Component from @ angular / core, which is located inside the node_modules directory.