You can also download the final result.
The root folder contains a few configuration files and the app folder which holds the main content of the application.
/root /app /index.html /src /app.component.ts /app.module.ts /main.ts /package.json /tsconfig.json /webpack.config.js
Note: Structure may vary based on your application needs.
Let's take a look at the config files:
When we type npm start in our CLI it executes both the commands. We just need to include the bundled file in or HTML and run it.
For more information about AOT please refer to the official Ahead-Of-Time Compiler Guide.
For more information about Webpack please refer to the official guide.
Add the needed references and the <app-root></app-root> tag to the body of index.html.
That's the tag where we initialize the main component.
Then import the bundled file we received after running the npm start command.
In the above example we create the widget through attributes.
There is another way through method called createComponent. It takes just one argument - an object containing the settings for the widget.
Now install the packages with npm install and execute the command npm start. A file named main.bundle.js will appear in the app folder. Finally open index.html.