如何在 Angular 7 项目中集成 html 模板

Question

I'm integrating a html template in angular 7 project and it is not working correctly

I added the template files under assets/template/.. and i added the imports in angular.json like:

• "styles": ["src/assets/template/css/style-customizer.css",...],
• "scripts": ["src/assets/template/js/vendor/modernizr-2.8.3.min.js",...]

I edited the html code:

• removed doctype and html tags
• removed all the header
• removed all css and js imports
• edited the images sources

(like src="/assets/template/img/slider/1.jpg" alt="main slider" title="#htmlcaption1")

I added the html code in index.html under the app-root tag and all working fine

But when i change it to app.component.html:

• some images not showing
• some css are not working correctly
• and some animations not working

and I don't have any error in my console

Answer 1

I usually don't use styles array in angular.json, Instead, I import all global styles in styles.css as it is set into angular.json styles array by default.

/* You can add global styles to this file, and also import other style files */

@import "assets/quote.css";

@import "https://fonts.googleapis.com/css?family=IBM+Plex+Sans+Condensed:200|Josefin+Sans:300|Julius+Sans+One|Merriweather+Sans:400|Overpass:400|Quicksand"

Answer 2

Just add encapsulation: ViewEncapsulation.None in @component like below mentioned.

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})