This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Configure Defaults for Generating Code with Angular CLI

    Bram BorggreveBram Borggreve

    The default Angular CLI configuration generates components that consist of 4 files. The component class, an HTML template, a stylesheet and a spec file that contains the unit test.

    In order to keep our components concise we update our AppComponent and move the template and style from an external file to inline. This allows us to delete the 2 external files.

    We can configure our project to generate the template and the style 'inline' by default.

    To do this we run the commands:

    ng config schematics.@schematics/angular.component.inlineStyle true
    ng config schematics.@schematics/angular.component.inlineTemplate true

    The changes are made to angular.json in the project root.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 By default, the Angular CLI creates components with an external template and style sheet. In our app component, we rename the template URL property to template, and add the content inside a string literal.

    00:12 We rename style URLs to styles, and set the value to an array with string literal. After this is done, we can remove the external files that are no longer used. We can use the ngConfig command to set the defaults for a specific schematic, schematic Angular in this case.

    00:30 We set inline style and inline template to true. If we check angular-cli.json in our project root, we see that the defaults are stored there.

    Discuss

    Discuss